<script setup>
import { ref } from "vue";
import { imgUrl } from "../../../utils/global";
import ShopList from "../../../components/shop-list/index";

const typeList = ref([
  "选体检",
  "齿科护理",
  "热门疫苗",
  "健康好物",
  "专项检查",
]);
const currentType = ref(0);

const typeItemList = ref([
  "入职体检",
  "男士套餐",
  "女士甄选",
  "中老年",
  "婚检孕检",
  "防癌筛查",
  "CT/MRI",
  "专项检查",
  "高端尊贵",
  "企业团检",
]);
const currentTypeItem = ref(0);
</script>

<template>
  <view class="app-shop">
    <view class="input-wrapper">
      <image
        class="input-icon"
        :src="imgUrl('/static/img/icons/search.png')"
        mode="aspectFill"
      ></image>
      <input type="text" placeholder="搜索商品" />
    </view>

    <view class="type-wrapper">
      <view class="type-header">
        <text
          :class="index === currentType ? 'type-active' : ''"
          v-for="(item, index) in typeList"
          :key="`type-item-${index}`"
          @click="() => (currentType = index)"
          >{{ item }}</text
        >
      </view>

      <view class="type-content">
        <view
          class="type-item"
          :class="currentTypeItem === index ? 'type-item-active' : ''"
          v-for="(item, index) in typeItemList"
          :key="`type-item-${index}`"
          @click="currentTypeItem = index"
        >
          <image
            class="type-item-avatar"
            :src="`../../../static/imgs/shop-avatar${index + 1}.png`"
            mode="aspectFill"
          ></image>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <view class="shop-wrapper">
      <ShopList :data="[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]" />
    </view>
  </view>
</template>

<style src="./style.scss" scoped />
